<template lang="pug">
    el-card(shadow="never",v-if="visible")
      div(slot="header",class="clearfix")
          span 编辑胰岛素泵型号
          i(class="el-icon-loading",v-if="querying")

      el-form(:model="newInsulinModel",ref="newInsulinModelForm")
        el-form-item(prop="pumpBrandId",:rules="[{required:true, message: '胰岛素泵品牌不能为空'}]")
            el-select(placeholder="胰岛素泵品牌",
                        v-model="newInsulinModel.pumpBrandId",
                        @change="brandChange",
                        clearable)
                            el-option(v-for="brand in brands",:label="brand.name",:value="brand.value",:key="brand.value")
            i(class="el-icon-loading",v-if="selectionQuerying")

        el-form-item(prop="name",:rules="[{required:true, message: '胰岛素泵型号不能为空'}]")
          el-input(placeholder="胰岛素泵型号",v-model="newInsulinModel.name",type="text",@change="submit")
      div(class="card-footer")
          div(class="pull-right")
              el-button(size="small",@click="close")
                span 关闭
              submit-button(@click="submit",:loading="submiting",type="warning")
                i(class="el-icon-check")
                span 保存

</template>

<script>
import Vue from "vue";
import { AwesomePagination } from "awesome-element-ui";
Vue.use(AwesomePagination);

import axios from "@/plugin/axios";

import PumpModelNewModel from "./PumpModelNewModel";
import BaseNew from "@/mixins/BaseNew";

export default {
  name: "pump-model-edit",
  mixins: [BaseNew],
  data() {
    return {
      newInsulinModel: new PumpModelNewModel(),
      brands: [],
      selectionQuerying: false, // 获取胰岛素泵品牌选项数据状态
      querying:false
    };
  },
  watch: {
    id(val) {
      if (val) {
        this.getPumpModel();
      }
    }
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: String, default: null }
  },
  methods: {
    /**获取胰岛素泵品牌选项数据 */
    getSelection() {
      this.selectionQuerying = true;
      axios({ method: "post", url: "/PumpBrand/selection" })
        .then(brands => this.getSelectionSuccess(brands))
        .catch(() => (this.selectionQuerying = false));
    },
    getSelectionSuccess(brands) {
      this.selectionQuerying = false;
      this.brands = brands;
    },
    submit() {
      if (this.submiting) return; // 防止重复提交
      this.$refs.newInsulinModelForm.validate(valid => {
        if (valid) this.doSubmit();
      });
    },
    doSubmit() {
      axios({
        method: "post",
        url: "/PumpModel/Update",
        data: { model: this.newInsulinModel }
      })
        .then(data => this.submitSuccess(data))
        .catch(() => (this.submiting = false));
    },
    submitSuccess(data) {
      this.submiting = false;
      this.showUpdateSuccess();
      //  this.resetForm('newInsulinModelForm');
      this.$emit("success"); // 提交事件
    },
    close() {
      this.visible = false;
      this.$emit("update:visible", this.visible);
    },
    getPumpModel() {
      this.querying = true;
      axios({
        method: "post",
        url: "/PumpModel/GetPumpModel",
        data: { id: this.id }
      })
        .then(data => this.getPumpModelSuccess(data))
        .catch(() => (this.querying = false));
    },
    getPumpModelSuccess(pumpModel) {
      this.newInsulinModel = pumpModel;
      this.querying = false;
    },
    brandChange() {}
  },
  created() {
    this.getSelection();
  }
};
</script>
